Le TD présente un objet numérique : le mur d'eau interactif et propose au travers d'exercice de produire des scripts capable d'afficher formes, images et textes sur pour une version simulée d'un tel mur.
L'énoncé du TD est un objet interactif dont une version imprimée s'avèrerait peu utile. Il est composé de deux parties principales. Premièrement, les éléments de cours théorique (syntaxe JavaScript ici) sont présenté brièvement puis immédiatement suivi de petits exercices applicatifs accompagnés d'un certain nombre d'indices. Une telle approche permet notamment une plus grande autonomie des groupes d'élèves.
La seconde partie se présente sous la forme d'un mini-projet dont la production doit respecter un petit cahier des charges. Les éléments nécessaires à sa réalisation sont principalement présents dans la première partie. La nécessité d'utiliser des listes justifie une courte introduction théorique.
- Découverte du langage JavaScript
- Manipulation de variables avec des portées locales et globales
- Prototypage et utilisation de fonctions
- Utilisation de listes, de tableaux et éventuellement d'objets JS (équivalent dictionnaire)
- Réalisation de solutions algorithmiques dans un contexte pratique (problématiques liées au temps)
- Encourager une réflexion préalable déconnectée
Extraits du BO :
| Contenus | Capacités attendues |
|---|---|
| Constructions élémentaires | Mettre en évidence un corpus de constructions élémentaires |
| Spécification | Prototyper une fonction.Décrire les préconditions sur les arguments.Décrire des postconditions sur les résultats |
| Tableau indexé, tableau donné en compréhension | Lire et modifier les éléments d’un tableau grâce à leurs index.Construire un tableau par compréhension. Utiliser des tableaux de tableaux pour représenter des matrices: notation a[i][j].Itérer sur les éléments d’un tableau |
| Dictionnaires par clés et valeurs | Construire une entrée de dictionnaire. |
| Mise au point de programmes | Utiliser des jeux de tests. |
| Utilisation de bibliothèques | Utiliser la documentation d’une bibliothèque. |
L'enseignant présente le mur d'eau interactif et explique le déroulement : la fiche d'activité est sous forme d'un cours en ligne. Les éléments de cours sont présenté brièvement et suivis d'exercices d'application. Les indices peuvent être consultés sans que l'élève n'en soit pénalisé. Un mini-projet final doit permettre d'afficher des motifs libres et du texte comme sur la vidéo de présentation.
Idéalement, les exercices doivent être faits durant la première heure, la seconde étant consacrée au mini-projet.
Les programmes réalisés à chaque exercice devront être copiés dans un fichier texte séparés afin que l'enseignant puisse contrôler le code à chaque instant et éventuellement les récupérer pour les noter. Les programmes produits durant le mini-projet seront également copiés et évalués selon les modalités choisies par l'enseignant.
Insister auprès des élèves sur la nécessité de séparer le temps de programmation du temps de réflexion préalable. La réalisation de schéma temporels du type suivant doit être encouragée :
Les élèves peuvent travailler seuls ou en binômes.
La console des outils développeurs de Firefox (ou Chrome) peuvent être utilisés pour afficher des valeurs à l'aide de console.log()
- Un navigateur récent. L'énoncé fonctionne bien avec Firefox (à préférer) et Chrome. Eviter Edge, Safari et Internet Explorer :/
- Un éditeur de texte basique (Notepad++, Scite, Bracket, Sublime Text, etc.)
- Un papier et un crayon.
- Coopération avec une filière technologique travaillant sur la réalisation d'un véritable mur d'eau interactif.
- Réalisation d'animations en boucle, effets "random" (utilisation directe de la librairie hors navigateur recommandée)
- Variation de vitesse, simulation réaliste selon les règles de la physique (effet d'accélération)
